<template>
	<view class="box">
		
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 导航 -->
			<view class="navbar">
				
				<u-navbar :safeAreaInsetTop="true" bgColor="#FFF" rightIcon="more-dot-fill" :placeholder="true" leftIconColor="#000" :border="false">
				
					<searchInput slot="right" @searchKeyConfirm="searchKeyConfirm"></searchInput>
				
				</u-navbar>
				
			</view>
			
			<view class="box-pading">
				
				<!-- tabs -->
				<view class="tabs">
					<u-tabs :list="tabsList" @click="tabsClick"
						:activeStyle="{color: '#000000',fontWeight: 'bold',fontSize:'18px'}"
						:inactiveStyle="{color: 'rgba(143, 144, 145, 1)',fontSize:'15px'}" :lineColor="'#19be6b'">
					</u-tabs>
				</view>
				
				<!-- 动态 -->
				<view class="main">
					<dynamicItem></dynamicItem>
					<dynamicItem></dynamicItem>
				</view>
				
			</view>
			
		</z-paging>
		
	</view>
</template>

<script>
	import searchInput from './common/navSearch.vue'
	import dynamicItem from './common/dynamic.vue'
	export default {
		components:{
			searchInput,
			dynamicItem
		},
		data() {
			return {
				tabsList: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				dataList:[],
				searchKey:'',
			};
		},
		computed: {
	
		},
		onLoad(e) {
			this.searchKey = e.key || ''
		},
		methods: {
			
			//tabs 点击
			tabsClick(item) {
				console.log(item, 'item')
			},
			
			//下拉刷新,上拉加载
			queryList(pageNo, pageSize) {
				
				this.$refs.paging.complete([]);
				
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			
			//接受子级传值
			searchKeyConfirm(e){
				console.log(e)
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	
	.tabs {
		margin: 40rpx 0;
	}
	
</style>
